<template>
  <div class="use-guide-page">
    <!-- 顶部导航栏 -->
    <el-header class="navbar">
      <div class="logo">AI创意工具箱</div>
      <el-menu :default-active="activeIndex" class="menu" mode="horizontal">
        <el-menu-item index="1" @click="goToHome">首页</el-menu-item>
        <el-menu-item index="2">功能中心</el-menu-item>
        <el-menu-item index="3">使用指南</el-menu-item>
        <el-menu-item index="4">关于我们</el-menu-item>
      </el-menu>
    </el-header>

    <!-- 英雄区 -->
    <section class="hero">
      <div class="hero-content">
        <h1>使用指南</h1>
        <p>详细说明如何使用AI创意工具箱的各项功能，助您快速上手</p>
        <div class="hero-decoration">
          <div class="floating-card card-1">
            <i class="el-icon-edit-outline"></i>
          </div>
          <div class="floating-card card-2">
            <i class="el-icon-microphone"></i>
          </div>
          <div class="floating-card card-3">
            <i class="el-icon-picture"></i>
          </div>
        </div>
      </div>
    </section>

    <!-- 快速导航 -->
    <section class="quick-nav">
      <h2 class="section-title">快速导航</h2>
      <div class="nav-grid">
        <div class="nav-item" @click="scrollToSection('text-generation')">
          <div class="nav-icon">
            <i class="el-icon-edit-outline"></i>
          </div>
          <h3>文案生成</h3>
        </div>
        <div class="nav-item" @click="scrollToSection('voice-generation')">
          <div class="nav-icon">
            <i class="el-icon-microphone"></i>
          </div>
          <h3>语音生成</h3>
        </div>
        <div class="nav-item" @click="scrollToSection('text-summary')">
          <div class="nav-icon">
            <i class="el-icon-document-copy"></i>
          </div>
          <h3>文本摘要</h3>
        </div>
        <div class="nav-item" @click="scrollToSection('music-generation')">
          <div class="nav-icon">
            <i class="el-icon-headset"></i>
          </div>
          <h3>音乐生成</h3>
        </div>
        <div class="nav-item" @click="scrollToSection('emotion-analysis')">
          <div class="nav-icon">
            <i class="el-icon-emoji-happy"></i>
          </div>
          <h3>情感分析</h3>
        </div>
        <div class="nav-item" @click="scrollToSection('video-editing')">
          <div class="nav-icon">
            <i class="el-icon-film"></i>
          </div>
          <h3>视频创作</h3>
        </div>
        <div class="nav-item" @click="scrollToSection('ocr')">
          <div class="nav-icon">
            <i class="el-icon-reading"></i>
          </div>
          <h3>文字识别</h3>
        </div>
        <div class="nav-item" @click="scrollToSection('text-to-image')">
          <div class="nav-icon">
            <i class="el-icon-picture"></i>
          </div>
          <h3>文字生成图片</h3>
        </div>
        <div class="nav-item" @click="scrollToSection('remove-watermark')">
          <div class="nav-icon">
            <i class="el-icon-delete"></i>
          </div>
          <h3>去水印</h3>
        </div>
      </div>
    </section>

    <!-- 功能使用指南 -->
    <section class="guide-sections">
      <!-- 文案生成 -->
      <div id="text-generation" class="guide-section">
        <div class="guide-header">
          <div class="guide-icon">
            <i class="el-icon-edit-outline"></i>
          </div>
          <div class="guide-title">
            <h2>文案生成</h2>
            <p>智能生成各类文案内容，满足不同场景需求</p>
          </div>
        </div>
        <div class="guide-content">
          <div class="guide-steps">
            <div class="step">
              <div class="step-number">1</div>
              <div class="step-content">
                <h3>输入关键词</h3>
                <p>在文本框中输入您想要生成的文案主题或关键词，例如"夏季促销活动"、"产品介绍"等。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">2</div>
              <div class="step-content">
                <h3>选择文案类型</h3>
                <p>从下拉菜单中选择您需要的文案类型，如标题、广告语、产品描述、社交媒体帖子等。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">3</div>
              <div class="step-content">
                <h3>设置文案风格</h3>
                <p>选择文案的风格，如正式、轻松、幽默、专业等，以匹配您的品牌调性。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">4</div>
              <div class="step-content">
                <h3>生成并优化</h3>
                <p>点击"生成文案"按钮，系统将根据您的输入生成文案。您可以多次生成或修改关键词以获得最佳效果。</p>
              </div>
            </div>
          </div>
          <div class="guide-tips">
            <h3>使用技巧</h3>
            <ul>
              <li>提供更具体的关键词可以获得更精准的文案</li>
              <li>尝试不同的风格组合，找到最适合的表达方式</li>
              <li>生成的文案可以进一步编辑和优化</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 语音生成 -->
      <div id="voice-generation" class="guide-section">
        <div class="guide-header">
          <div class="guide-icon">
            <i class="el-icon-microphone"></i>
          </div>
          <div class="guide-title">
            <h2>语音生成</h2>
            <p>将文本转换为自然流畅的语音，支持多种语言和音色</p>
          </div>
        </div>
        <div class="guide-content">
          <div class="guide-steps">
            <div class="step">
              <div class="step-number">1</div>
              <div class="step-content">
                <h3>输入文本</h3>
                <p>在文本框中输入您想要转换为语音的文本内容，支持中英文混合输入。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">2</div>
              <div class="step-content">
                <h3>选择语言</h3>
                <p>从下拉菜单中选择文本的语言，系统支持中文、英文、日文、韩文等多种语言。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">3</div>
              <div class="step-content">
                <h3>调整语速</h3>
                <p>使用滑块调整语音的播放速度，范围从0.5倍到2倍，默认为正常速度。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">4</div>
              <div class="step-content">
                <h3>生成语音</h3>
                <p>点击"开始生成"按钮，系统将处理您的文本并生成语音文件。生成完成后可以试听和下载。</p>
              </div>
            </div>
          </div>
          <div class="guide-tips">
            <h3>使用技巧</h3>
            <ul>
              <li>长文本可能需要更长的处理时间，请耐心等待</li>
              <li>不同语言的语音效果可能有所不同，建议先试听一小段</li>
              <li>可以尝试不同的语速设置，找到最适合的播放效果</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 文本摘要 -->
      <div id="text-summary" class="guide-section">
        <div class="guide-header">
          <div class="guide-icon">
            <i class="el-icon-document-copy"></i>
          </div>
          <div class="guide-title">
            <h2>文本摘要</h2>
            <p>快速提取长文本的核心信息，生成简洁摘要</p>
          </div>
        </div>
        <div class="guide-content">
          <div class="guide-steps">
            <div class="step">
              <div class="step-number">1</div>
              <div class="step-content">
                <h3>输入长文本</h3>
                <p>在文本框中输入或粘贴需要摘要的长文本内容，系统支持最多10000字符的文本。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">2</div>
              <div class="step-content">
                <h3>设置摘要长度</h3>
                <p>选择"最小长度"或"最大长度"，然后使用滑块设置具体的长度值，范围从20到300字符。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">3</div>
              <div class="step-content">
                <h3>生成摘要</h3>
                <p>点击"生成摘要"按钮，系统将分析文本内容并提取关键信息，生成简洁的摘要。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">4</div>
              <div class="step-content">
                <h3>查看结果</h3>
                <p>摘要生成完成后，系统会显示原文长度和摘要长度的对比，您可以复制摘要内容或重新生成。</p>
              </div>
            </div>
          </div>
          <div class="guide-tips">
            <h3>使用技巧</h3>
            <ul>
              <li>对于结构清晰的文本，摘要效果通常更好</li>
              <li>尝试不同的长度设置，找到最适合的摘要详细程度</li>
              <li>摘要结果可以进一步编辑和优化</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 音乐生成 -->
      <div id="music-generation" class="guide-section">
        <div class="guide-header">
          <div class="guide-icon">
            <i class="el-icon-headset"></i>
          </div>
          <div class="guide-title">
            <h2>音乐生成</h2>
            <p>根据文字描述生成原创音乐，适用于多种场景</p>
          </div>
        </div>
        <div class="guide-content">
          <div class="guide-steps">
            <div class="step">
              <div class="step-number">1</div>
              <div class="step-content">
                <h3>描述音乐风格</h3>
                <p>在文本框中描述您想要的音乐风格，例如"轻松的爵士乐"、"激昂的摇滚音乐"等。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">2</div>
              <div class="step-content">
                <h3>设置音乐参数</h3>
                <p>选择音乐的时长、节奏和情绪等参数，系统会根据您的设置生成相应的音乐。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">3</div>
              <div class="step-content">
                <h3>生成音乐</h3>
                <p>点击"生成音乐"按钮，系统将根据您的描述和参数生成原创音乐。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">4</div>
              <div class="step-content">
                <h3>试听和下载</h3>
                <p>音乐生成完成后，您可以在线试听，如果满意可以下载保存到本地。</p>
              </div>
            </div>
          </div>
          <div class="guide-tips">
            <h3>使用技巧</h3>
            <ul>
              <li>提供更具体的音乐描述可以获得更符合预期的结果</li>
              <li>音乐生成可能需要较长时间，请耐心等待</li>
              <li>可以尝试不同的参数组合，探索更多音乐可能性</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 情感分析 -->
      <div id="emotion-analysis" class="guide-section">
        <div class="guide-header">
          <div class="guide-icon">
            <i class="el-icon-emoji-happy"></i>
          </div>
          <div class="guide-title">
            <h2>情感分析</h2>
            <p>分析文本情感倾向，优化内容表达</p>
          </div>
        </div>
        <div class="guide-content">
          <div class="guide-steps">
            <div class="step">
              <div class="step-number">1</div>
              <div class="step-content">
                <h3>输入文本</h3>
                <p>在文本框中输入或粘贴需要分析情感倾向的文本内容。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">2</div>
              <div class="step-content">
                <h3>选择分析类型</h3>
                <p>选择您需要的分析类型，如整体情感分析、句子级情感分析或关键词情感分析。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">3</div>
              <div class="step-content">
                <h3>开始分析</h3>
                <p>点击"开始分析"按钮，系统将分析文本的情感倾向，包括积极、消极或中性。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">4</div>
              <div class="step-content">
                <h3>查看结果</h3>
                <p>分析完成后，系统会显示情感分析结果，包括情感倾向、置信度和关键词情感分布。</p>
              </div>
            </div>
          </div>
          <div class="guide-tips">
            <h3>使用技巧</h3>
            <ul>
              <li>情感分析对于营销文案、用户评论等场景特别有用</li>
              <li>可以分析不同版本的文本，选择情感表达更合适的版本</li>
              <li>情感分析结果可以帮助优化内容策略</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 视频创作 -->
      <div id="video-editing" class="guide-section">
        <div class="guide-header">
          <div class="guide-icon">
            <i class="el-icon-film"></i>
          </div>
          <div class="guide-title">
            <h2>视频创作</h2>
            <p>视频分割、拼接、文本转视频，快速制作自媒体视频</p>
          </div>
        </div>
        <div class="guide-content">
          <div class="guide-steps">
            <div class="step">
              <div class="step-number">1</div>
              <div class="step-content">
                <h3>上传视频</h3>
                <p>点击"上传视频"按钮，选择您要编辑的视频文件，支持常见视频格式。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">2</div>
              <div class="step-content">
                <h3>选择编辑功能</h3>
                <p>从视频分割、视频拼接、添加文本、添加转场等功能中选择您需要的操作。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">3</div>
              <div class="step-content">
                <h3>设置参数</h3>
                <p>根据所选功能设置相应参数，如分割时间点、拼接顺序、文本内容、转场效果等。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">4</div>
              <div class="step-content">
                <h3>处理和下载</h3>
                <p>点击"开始处理"按钮，系统将处理您的视频。处理完成后可以预览和下载结果。</p>
              </div>
            </div>
          </div>
          <div class="guide-tips">
            <h3>使用技巧</h3>
            <ul>
              <li>视频处理可能需要较长时间，请耐心等待</li>
              <li>建议先处理小段视频测试效果，再处理完整视频</li>
              <li>可以多次应用不同效果，创建更丰富的视频内容</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 文字识别 -->
      <div id="ocr" class="guide-section">
        <div class="guide-header">
          <div class="guide-icon">
            <i class="el-icon-reading"></i>
          </div>
          <div class="guide-title">
            <h2>文字识别</h2>
            <p>识别图片中的文字，支持多语言和复杂排版</p>
          </div>
        </div>
        <div class="guide-content">
          <div class="guide-steps">
            <div class="step">
              <div class="step-number">1</div>
              <div class="step-content">
                <h3>上传图片</h3>
                <p>点击"上传图片"按钮，选择包含文字的图片文件，支持JPG、PNG等常见格式。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">2</div>
              <div class="step-content">
                <h3>选择识别语言</h3>
                <p>从下拉菜单中选择图片中文字的语言，系统支持中文、英文、日文等多种语言。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">3</div>
              <div class="step-content">
                <h3>开始识别</h3>
                <p>点击"开始识别"按钮，系统将分析图片并提取其中的文字内容。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">4</div>
              <div class="step-content">
                <h3>查看和复制结果</h3>
                <p>识别完成后，系统会显示识别出的文字内容，您可以复制文本或导出为文本文件。</p>
              </div>
            </div>
          </div>
          <div class="guide-tips">
            <h3>使用技巧</h3>
            <ul>
              <li>清晰度高的图片识别效果更好</li>
              <li>对于复杂排版的图片，可以尝试调整识别参数</li>
              <li>识别结果可能需要手动校对和编辑</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 文字生成图片 -->
      <div id="text-to-image" class="guide-section">
        <div class="guide-header">
          <div class="guide-icon">
            <i class="el-icon-picture"></i>
          </div>
          <div class="guide-title">
            <h2>文字生成图片</h2>
            <p>根据文字描述生成创意图片，支持风格自定义</p>
          </div>
        </div>
        <div class="guide-content">
          <div class="guide-steps">
            <div class="step">
              <div class="step-number">1</div>
              <div class="step-content">
                <h3>输入描述</h3>
                <p>在文本框中详细描述您想要生成的图片内容，包括主体、背景、风格等元素。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">2</div>
              <div class="step-content">
                <h3>选择图片风格</h3>
                <p>从下拉菜单中选择图片的风格，如写实、卡通、油画、水彩等。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">3</div>
              <div class="step-content">
                <h3>设置图片参数</h3>
                <p>设置图片的尺寸、宽高比和其他参数，以满足您的使用需求。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">4</div>
              <div class="step-content">
                <h3>生成图片</h3>
                <p>点击"生成图片"按钮，系统将根据您的描述生成创意图片。生成完成后可以预览和下载。</p>
              </div>
            </div>
          </div>
          <div class="guide-tips">
            <h3>使用技巧</h3>
            <ul>
              <li>提供更详细和具体的描述可以获得更符合预期的图片</li>
              <li>可以尝试不同的风格组合，探索更多创意可能性</li>
              <li>图片生成可能需要较长时间，请耐心等待</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 去水印 -->
      <div id="remove-watermark" class="guide-section">
        <div class="guide-header">
          <div class="guide-icon">
            <i class="el-icon-delete"></i>
          </div>
          <div class="guide-title">
            <h2>去水印</h2>
            <p>去除图片和视频中的水印，还原素材原貌</p>
          </div>
        </div>
        <div class="guide-content">
          <div class="guide-steps">
            <div class="step">
              <div class="step-number">1</div>
              <div class="step-content">
                <h3>选择文件类型</h3>
                <p>首先选择要处理的文件类型，图片或视频。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">2</div>
              <div class="step-content">
                <h3>上传文件</h3>
                <p>点击"上传文件"按钮，选择包含水印的图片或视频文件。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">3</div>
              <div class="step-content">
                <h3>标记水印区域</h3>
                <p>在上传的文件中标记水印的位置和范围，系统将根据标记去除水印。</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">4</div>
              <div class="step-content">
                <h3>处理和下载</h3>
                <p>点击"开始处理"按钮，系统将去除文件中的水印。处理完成后可以预览和下载结果。</p>
              </div>
            </div>
          </div>
          <div class="guide-tips">
            <h3>使用技巧</h3>
            <ul>
              <li>准确标记水印区域可以获得更好的去水印效果</li>
              <li>对于复杂背景的水印，可能需要多次处理</li>
              <li>去水印效果取决于水印的复杂度和背景的复杂度</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <el-footer class="footer">
      <div class="footer-content">
        <p>© 2025 AI创意工具箱-自媒体内容创作助手. 保留所有权利.</p>
      </div>
    </el-footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const activeIndex = ref('3');

// 返回首页
const goToHome = () => {
  router.push('/');
};

// 滚动到指定部分
const scrollToSection = (sectionId) => {
  const section = document.getElementById(sectionId);
  if (section) {
    section.scrollIntoView({ 
      behavior: 'smooth',
      block: 'start'
    });
  }
};
</script>

<style scoped>
@import '../assets/UseGuide.css';
</style>